<template>
	<view class="winning">
		<top-bar :home="false" backState="2000" :transparentFixedFontColor="topTabFontColor" :type="topTabType" title="中奖公示"></top-bar>
		<view class="winningBox" :style="{ paddingTop: (statusBarHeight*2+103.5) + 'rpx' }">
			<image class="winningTit" src="https://lovebirdopen.com/static/img/recruitOfficer/winningTit.png" mode=""></image>
			<view class="winningContBox">
				<!-- 轴 -->
				<image class="axisImg axisImg1" src="https://lovebirdopen.com/static/img/recruitOfficer/axisTopImg.png" mode=""></image>
				<image class="axisImg axisImg2" src="https://lovebirdopen.com/static/img/recruitOfficer/axisBotImg.png" mode=""></image>
				<view class="winListBox">
					<view class="winList">
						<view class="insideBox">
							<view class="winListTitBox">
								<view class="tit1">昵称</view>
								<view class="tit2">奖品</view>
								<view class="tit3">中奖时间</view>
							</view>
							<view class="winListContBox">
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
								<view class="eachList">
									<view class="tit1 ellipsis">倪居然</view>
									<view class="tit2 ellipsis">500毫升九仙御贡</view>
									<view class="tit3">2020/02/21</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 背景 -->
		<view class="bjTop"></view>
		<view class="bjBottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 顶部导航样式
				topTabType:'transparentFixed',
				topTabFontColor:'#fff',
				// 导航栏高度
				statusBarHeight: 0,
			}
		},
		onLoad: function (option) {
			
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll(e) {//滚动顶部导航的变化
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.topTabFontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.topTabFontColor = '#fff';
			}
	
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.winning{
		position: relative;
		min-height: 100%;
		padding-bottom: 140rpx;
		background: linear-gradient(180deg, #D52600 0%, #D52600 100%);
	
		.bjTop{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 190rpx;
			background: url('https://lovebirdopen.com/static/img/recruitOfficer/bjTop.png') no-repeat;
			background-size: 100% 100%;
		}
		.bjBottom{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 578rpx;
			background: url('https://lovebirdopen.com/static/img/recruitOfficer/bjBottom.png') no-repeat;
			background-size: 100% 100%;
		}
	}

	.winningBox{
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 0 30rpx;
		
		.winningTit{
			width: 452rpx;
			height: 98rpx;
			margin: 0 auto 20rpx;
		}
		.winningContBox{
			position: relative;
			// max-height: 1192rpx;
			padding: 0 18rpx;
			
			.axisImg{
				position: absolute;
				left: 0;
				width: 100%;
				height: 40rpx;
			}
			.axisImg1{
				top: 0;
			}
			.axisImg2{
				bottom: 0;
			}
			
			.winListBox{
				padding: 64rpx 12rpx 64rpx 24rpx;
				background: linear-gradient(180deg, #FF5038 11.98%, #FF5631 100%);
				border-radius: 16rpx;
				
				.winList{
					padding-right: 12rpx;
					// min-height: 700rpx;
					height: 800rpx;
					overflow-x: hidden;
					overflow-y: auto;
					
					.insideBox{
						width: 100%;
						border-radius: 8rpx;
						overflow: hidden;
						text-align: center;
						background: #FF6550;
						font-size: 24rpx;
						line-height: 74rpx;
						.winListTitBox{
							width: 100%;
							height: 76rpx;
							display: flex;
							color: #FF5038;
							border-bottom: 1rpx solid #FF5235;
							background: rgba(255, 255, 255, 0.7);
							.tit1{
								width: 33%;
							}
							.tit2{
								width: 37.5%;
								border-left: 1rpx solid #FF5235;
								border-right: 1rpx solid #FF5235;
							}
							.tit3{
								width: 29.5%;
							}
						}
						.winListContBox{
							.eachList{
								width: 100%;
								height: 76rpx;
								display: flex;
								color: #FFFFFF;
								border-bottom: 1rpx solid #FF5235;
								.tit1{
									width: 33%;
									padding: 0 8rpx;
								}
								.tit2{
									width: 37.5%;
									padding: 0 8rpx;
									border-left: 1rpx solid #FF5235;
									border-right: 1rpx solid #FF5235;
								}
								.tit3{
									width: 29.5%;
								}
							}
							.eachList:nth-child(2n){
								background: #FF7B67;
							}
						}
					}
				}
				//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
				.winList::-webkit-scrollbar
				{
					width: 16rpx;
					border-radius: 18rpx;
					background-color: #DF1B00;
				}
				  
				//定义滚动条轨道 内阴影+圆角
				.winList::-webkit-scrollbar-track
				{
					// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
					border-radius: 18rpx;
					background-color: #DF1B00;
				}
				  
				//定义滑块 内阴影+圆角
				.winList::-webkit-scrollbar-thumb
				{
					border-radius: 18rpx;
					background-color: #BD0B00;
				}
			}
			
		}
	}









</style>
